<!-- LateralSpreads.vue -->
<template>
   <!-- <transition name="removeItem"> -->
       <li v-if="show" class="line">
            <div :translateX="0" ref="content" class="moveWrap"
                    @touchstart="touchstart"
                    @touchmove="touchmove"
                    @touchend="touchend"
                    :style="style">
                <slot name="slotContent"></slot>
            </div>
           <div @click="delFun" ref="bg" class="bgEl" :class="bgElClass">
                <span>{{bgText}}</span>
            </div>
       </li>
   <!-- </transition> -->
</template>
<script>

let touch = {},
    moveRate = 2,
    isScroll,
    checkIsScrollBool,
    banEvent;

export default {

    name: 'lateralSpreads',

    props: ['type','bgText','index','item','deleteFun'],

    data: function() {
        return {
            show:true,
            style: '',
        }
    },

    created(){

    },

    computed: {
        bgElClass(){
            var bindClass;
            if(this.$props.type == "left"){
                bindClass = 'left';
            }else if(this.$props.type == "right"){
                bindClass = 'right';
            }
            return bindClass;
        }
    },

    methods: {

        delFun(){
            // this.show = false;
            if(this.deleteFun){
                this.deleteFun(this.item,this.index);
            }
        },

        translateX(val,time) {
            if(!time) time = 0;
            return "-webkit-transform: translate(" + val + "px, 0px);-webkit-transition: transform "+ time +"ms ease;transform: translate(" + val + "px, 0px);transition: transform "+ time +"ms ease;";
        },

        resetOthesLi() {
            var parDom = this.$el.parentNode,
                domLi = parDom.getElementsByTagName('li');

            this.$refs.content.setAttribute("currentEl", "true");

            for(let i=0; i < domLi.length; i++){
                if(domLi[i].childNodes[0].getAttribute("currentEl") != "true"){
                    domLi[i].childNodes[0].style.cssText = this.translateX(0, 300);
                    domLi[i].childNodes[0].setAttribute('translateX',0)
                }
                domLi[i].childNodes[0].setAttribute("currentEl","");
            }
        },

        checkIsBanEvent() {
            var parDom = this.$el.parentNode,
                domLi = parDom.getElementsByTagName('li');
                banEvent = false;

            if(Math.abs(parseInt(this.$refs.content.getAttribute("translateX"))) > 0){
                return;
            }

            for(let i=0; i < domLi.length; i++){
                if(Math.abs(parseInt(domLi[i].childNodes[0].getAttribute("translateX"))) > 0){
                    banEvent = true;
                    break;
                }
            }
        },

        touchstart(e) {
            this.checkIsBanEvent(); 
            this.resetOthesLi();

            if(banEvent) return;

            touch.startX = e.touches[0].clientX;
            touch.startY = e.touches[0].clientY;

        },

        touchmove(e) {
            if(banEvent) return;

            touch.moveX = e.touches[0].clientX;
            touch.moveY = e.touches[0].clientY;

            var translateX = parseInt(this.$refs.content.getAttribute('translateX')),
                contentW = this.$refs.content.offsetWidth,
                bgElW = this.$refs.bg.offsetWidth,
                type = this.$props.type,
                offsetVal = (touch.moveX - touch.startX)/moveRate - translateX;

            // 检查是否为滚动方式
            if(checkIsScrollBool){
                if(!(Math.abs(touch.startX - touch.moveX) > Math.abs(touch.startY - touch.moveY))){
                    isScroll = true;
                }else{
                    isScroll = false;
                }
                checkIsScrollBool = false;
            }
            
            if(!isScroll){
                e.stopPropagation(); 
                e.preventDefault(); 
                // 限制偏移
                if(type == 'left'){
                    if(offsetVal > 0) offsetVal = 0;
                }else if(type == 'right'){
                    if(offsetVal < 0) offsetVal = 0;
                }
                this.style = this.translateX(offsetVal);
            };

        },

        touchend(e){

            if(banEvent) return;

            let translateX = parseInt(this.$refs.content.getAttribute('translateX')),
                bgElW = this.$refs.bg.offsetWidth,
                type = this.$props.type;

            if(type == 'left'){
                if((touch.startX - touch.moveX)/moveRate + translateX >= bgElW/2 && touch.moveX != 0){
                    this.$refs.content.setAttribute('translateX',bgElW)
                    this.style = this.translateX(-bgElW,300);
                }else{
                    this.$refs.content.setAttribute('translateX',0)
                    this.style = this.translateX(0,300);
                }
            }else if(type == 'right'){
                if((touch.moveX - touch.startX)/moveRate - translateX >= bgElW/2 && touch.moveX != 0){
                    this.$refs.content.setAttribute('translateX',-bgElW)
                    this.style = this.translateX(bgElW,300);
                }else{
                    this.$refs.content.setAttribute('translateX',0)
                    this.style = this.translateX(0,300);
                }
            }

            touch = {};
            banEvent = false;
            checkIsScrollBool = true;
        },
    }
}

</script>
<style lang="less" scoped>

.line{
    position: relative;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}
.moveWrap{
    z-index: 1;
    position: relative;
    background: #fff;
    overflow: hidden;
}
.bgEl{
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: #fff;
    font-size: 16px;
    height: 100%;
    line-height: 101px;
    overflow: hidden;
    padding: 0 20px;
}
.bgEl span{
}

.bgEl.right{
    left: 0;
    right: auto;
}

// .removeItem-leave-active {
//   transition: all .3s ease;
// }
// .removeItem-leave-to {
//     height: 0!important;
// }
</style>
